<template>
	<uni-forms class="forms" ref="customForm" :rules="customRules" :modelValue="customFormData">
		<!-- 新密码输入框 -->
		<uni-forms-item class="passward" required name="passward">
			<uni-easyinput type="password" v-model="customFormData.passward" maxlength="8" placeholder="请输入您的新密码" />
		</uni-forms-item>
		<!-- 确认密码输入框 -->
		<uni-forms-item class="passward" required name="confirmPassword">
			<uni-easyinput type="password" v-model="customFormData.confirmPassword" maxlength="8" placeholder="请重新输入新密码" />
		</uni-forms-item>
	</uni-forms>
	<!-- 确认修改按钮 -->
	<button type="primary" class="loginBtn" @click="confirm">确认修改</button>
</template>

<script setup>
	import {
		reactive, ref,
	} from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import api from '../../src/utils/api.js'
	const userid = ref(0)
	onLoad((option)=>{
		console.log(option.userid)
		userid.value = option.userid
	})
	// 自定义表单数据
	const customFormData = reactive({
		passward: '',
		confirmPassword: '',
	})
	// 自定义表单校验规则
	const customRules = reactive({
		passward: {
			rules: [{
					required: true,
					errorMessage: '新密码不能为空'
				},
				{
					pattern:/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8}$/,
					errorMessage: '密码由8位数字和字母组成，请输入正确的密码格式',
					trigger: 'blur'
				}
			]
		},
		confirmPassword: {
			rules: [{
					required: true,
					errorMessage: '确认密码不能为空'
				},
				{
					validateFunction: function (rule, value,data, callback){
						console.log(data.passward)
						if (value !== data.passward) {
							callback('两次输入的密码不一致')
						} else {
							callback();
						}
					},
					trigger: 'blur',
					
				}
			]
		},
	})
	const customForm=ref(null)
	const confirm = () =>{
		customForm.value.validate().then(res => {
			console.log('success', res);
			api('/appchange',{
				userid:userid.value,
				passward:res.passward
			},'POST').then(res=>{
				console.log(res)
				if(res.state==200){
					uni.navigateTo({
						url:'/pages/changesuccess/changesuccess'
					})
				}
			}).catch(err=>{
				console.log(err)
			})
			// uni.showToast({
			// 	title: `校验通过`
			// })
			
		}).catch(err => {
			console.log('err', err);
			// customForm.value.resetFields();	//重置
		})
	}
</script>

<style lang="scss" scoped>
	// 输入框
	.forms {
		width: 100%;
		padding: 0 75rpx;
		box-sizing: border-box;
		padding-top: 66rpx;

		// 验证label前面的星号去除
		::v-deep .uni-forms-item__label {
			display: none !important;
		}

		// 设置输入框的样式
		::v-deep .uni-easyinput__content-input {
			height: 100rpx;
			box-sizing: border-box;
			// border-bottom: 2rpx solid rgba(215, 215, 215, 1);
			font-size: 26rpx !important;
			padding-left: 10rpx !important;
		}

		// 设置外边框的样式
		::v-deep .is-input-border {
			border: none;
			border-bottom: 2rpx solid #000;
			border-radius: 0 !important;
		}

		// 默认文字样式
		::v-deep .uni-input-placeholder {
			color: rgb(153, 153, 153);
			font-size: 26rpx;
		}

		.form-item {
			display: flex;
			align-items: center;
		}
	}

	// 登录按钮
	.loginBtn {
		width: 600rpx;
		height: 80rpx;
		border-radius: 72rpx;
		margin-top: 84rpx;
		background-color: rgba(24, 144, 255, 1);
		box-shadow: 10rpx 10rpx 20rpx rgba(145, 213, 255, 1);
		font-family: 'ArialMT', 'Arial', sans-serif;
		color: #fff;
		font-size: 24rpx;
		text-align: center;
		line-height: 80rpx;
	}
</style>